'use client'

import React, { useState, useEffect, useMemo } from 'react'
import { useFetchRecordsMutation } from '@/stores/apiSlice'
import { formatTime, getReleaseTime } from '@/utils'

const News = () => {
  const [pageNo, setPageNo] = useState(8)
  const [summary, setSummary] = useState('')
  const [startDate, setStartDate] = useState('1995/9/1')
  const [endDate, setEndDate] = useState('1997/9/1')
  const [fetchRecords, { data, error }] = useFetchRecordsMutation()

  const releasetime = useMemo(() => {
    return getReleaseTime(startDate, endDate)
  }, [startDate, endDate])

  useEffect(() => {
    fetchRecords({
      tableName: 'record',
      page: {
        no: pageNo,
        size: 25,
        where: {
          summary: summary,
          releasetime: releasetime
        },
        orderBy: [
          {
            key: 'releasetime',
            mode: 'asc',
          },
        ],
      },
    })
  }, [pageNo, summary, releasetime, fetchRecords])

  if (error) {
    return (
      <div className="flex items-center justify-center min-h-screen bg-black p-4">
        <div className="alert alert-error shadow-lg max-w-md w-full text-white">
          <div>数据加载错误</div>
        </div>
      </div>
    )
  }

  if (!data || !data.data) {
    return (
      <h1 className="text-center text-xl font-bold text-white">暂无数据</h1>
    )
  }

  return (
    <div className="flex flex-col items-center min-h-screen bg-black p-4">
      {/*
      <div className="w-full max-w-2xl mx-auto mb-4 bg-rgba p-6 rounded-lg shadow-md border border-white">
        <div className="form-control mb-4">
          <input
            type="text"
            value={summary}
            onChange={(e) => setSummary(e.target.value)}
            placeholder='关键字搜索'
            className="input input-bordered w-full bg-rgba text-white border-white"
          />
        </div>
        <div className="form-control mb-4">
          <div className="flex space-x-2">
            <input
              type="date"
              value={startDate}
              onChange={(e) => setStartDate(e.target.value)}
              className="input input-bordered w-full bg-rgba text-white border-white"
            />
            <input
              type="date"
              value={endDate}
              onChange={(e) => setEndDate(e.target.value)}
              className="input input-bordered w-full bg-rgba text-white border-white"
            />
          </div>
        </div>
      </div>
      */}
      <div className="w-full max-w-2xl mx-auto">
        {data.data.data.map((record: any) => (
          <div key={record.id} className="border border-white bg-rgba card w-full shadow-xl shadow-lg mb-4 transition duration-300 transform hover:-translate-y-1 hover:shadow-2xl">
          <div className="card-body">
              <h2 className="card-title text-4xl">{formatTime(record.releasetime)}</h2>
              <p>{record.summary}</p>
            </div>
          </div>
        ))}
      </div>
      <div className="flex justify-between items-center w-full max-w-2xl mx-auto mt-4">
        <span className="text-white">
          {data.data.pageNo}/{data.data.pages}页
        </span>
        <span className="text-white">共计:{data.data.total}条</span>
        <div className="space-x-2">
          <button
            onClick={() => setPageNo((prev) => Math.max(prev - 1, 1))}
            className="btn bg-rgba text-black"
            disabled={pageNo === 1}
          >
            上一页
          </button>
          <button
            onClick={() => setPageNo((prev) => Math.min(prev + 1, data.data.pages))}
            className="btn bg-rgba text-black"
            disabled={pageNo === data.data.pages}
          >
            下一页
          </button>
        </div>
      </div>
    </div>
  )
}

export default News
